<ul class="card-text font-weight-light list-group list-group-flush">
  {% assign education = data[1] | sort: 'startDate' | reverse %}
  {% for content in education %}
  <li class="list-group-item">
    <div class="row">
      <div class="col-xs-2 cl-sm-2 col-md-2 text-center" style="width: 75px;">
        {% if content.startDate %}
        {% assign startDate = content.startDate | split: "-" | slice: 0,2 | join: "." %}
        {% assign endDate   = content.endDate   | split: "-" | slice: 0,2 | join: "." | default: "Present" %}
        {% assign date = startDate | append: " - "%}
        {% assign date = date | append: endDate %}
        {% else %}
        {% assign date = "" %}
        {% endif %}
        <table class="table-cv">
          <tbody>
            <tr>
              <td>
                <span class="badge font-weight-bold danger-color-dark text-uppercase align-middle" style="min-width: 75px;">{{date}}</span>
              </td>
            </tr>
            {% if content.location %}
            <tr>
              <td>
                <p class="location"><i class="fas fa-map-marker-alt iconlocation"></i> {{ content.location }}</p>
              </td>
            </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
      <div class="col-xs-10 cl-sm-10 col-md-10 mt-2 mt-md-0">
        <h6 class="title font-weight-bold ml-1 ml-md-4"><a href="{{ content.url }}">{{content.studyType}}</a></h6>
        <h6 class="ml-1 ml-md-4" style="font-size: 0.95rem;">{{content.institution}}</h6>
        <h6 class="ml-1 ml-md-4" style="font-size: 0.95rem; font-style: italic;">{{content.area}}</h6>
        <ul class="items">
          {% for item in content.courses %}
          <li>
            <span class="item">{{ item }}</span>
          </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </li>
  {% endfor %}
</ul>